<template>
  <div class="warehouse full-height bg-white page-content content relative-position padding-r-20 padding-l-20">
    <collapse ref="collapse">
      <template v-slot:content>
        <div class="form-inline justify-between form-inline bottom" style="padding: 4px 0 0">
          <div class="left box flex">
            <div class="margin-r-20 margin-b-20">
              <q-input v-model="params.number"
                       dense
                       emit-value
                       map-options
                       placeholder="请输入仓库编号"
                       outlined>
                <template v-slot:before>
                  <label class="text-right name label-width font-size-16 text-black">
                    <span>仓库编号:</span>
                  </label>
                </template>
              </q-input>
            </div>
            <div class="margin-r-20 margin-b-20">
              <q-input v-model="params.name"
                       dense
                       emit-value
                       map-options
                       placeholder="请输入仓库名称"
                       outlined>
                <template v-slot:before>
                  <label class="text-right name label-width font-size-16 text-black">
                    <span>仓库名称:</span>
                  </label>
                </template>
              </q-input>
            </div>
            <div class="margin-r-20 margin-b-20">
              <q-input v-model="params.adminName"
                       dense
                       emit-value
                       map-options
                       placeholder="请输入库管员姓名"
                       outlined>
                <template v-slot:before>
                  <label class="text-right name label-width font-size-16 text-black">
                    <span>库管员:</span>
                  </label>
                </template>
              </q-input>
            </div>
          </div>
          <div class="flex no-wrap">
            <q-btn
              class="btn margin-r-10"
              outline dense emit-value map-options options-dense
              color="primary"
              @click="resetSearch()"
              label="重置"
            />
            <q-btn class="btn" unelevated type="submit" color="primary" label="查询" @click="searchData()" />
          </div>
        </div>
        <div class="form-inline bottom" style="padding: 0 0 16px">
          <q-btn class="btn margin-r-10"
               outline
               color="primary"
               label="新增"
               @click="createOrEdit('create')"/>
        </div>
      </template>
    </collapse>
    <q-table :data="tableData"
             :columns="tableColumns"
             row-key="id"
             class="myTable scroll stick-last-col"
             style="margin: 4px 0 62px"
             :pagination.sync="pagination"
             :hide-bottom="tableData.length !== 0"
             no-data-label="暂无数据"
             :loading="isTableLoading"
             color="primary">
      <template v-slot:body-cell-operate="props">
        <q-td class="operate" style="width: 100px">
          <div class="btn-group" style="text-align: center">
            <q-btn
              flat
              round
              dense
              color="primary"
              @click="createOrEdit('edit', props.row)"
              class="iconfont icontubiao-12 font-18"
            >
              <q-tooltip>编辑</q-tooltip>
            </q-btn>
            <q-btn
              v-throttle
              flat
              round
              dense
              color="primary"
              class="iconfont icontubiao-16 font-18"
              @click="deleteWarehouse(props.row.id)"
            >
              <q-tooltip>删除</q-tooltip>
            </q-btn>
          </div>
        </q-td>
      </template>
      <template v-slot:no-data>
        <div class="full-width row flex-center font-size-14" style="color: #999">
          暂无数据
        </div>
      </template>
    </q-table>
    <pagination v-model="pagination.page"
                :page-size="pagination.rowsPerPage"
                :total="pagination.rowsNumber"
                @changePageSize="onPageSizeChange"
                @changePage="onPageChange"
                style="margin-bottom: 20px" />
    <add-edit-warehouse ref="addEditWarehouse" @close="getList()"/>
  </div>
</template>

<script>
import Pagination from 'src/components/pagination/index'
import { getUserName } from 'src/boot/status-monitor/machine'
import addEditWarehouse from './components/add-edit-warehouse'
import Collapse from 'src/components/collapse/index'
import { getWarehousesList, delWarehouses } from 'src/boot/system/warehouse'
import _ from 'lodash'

export default {
  name: 'warehouse',
  components: {
    Pagination,
    Collapse,
    addEditWarehouse
  },
  data () {
    return {
      params: {
        number: '',
        name: '',
        adminName: ''
      },
      fuzzyWarehouseNum: getUserName,
      tableColumns: [
        { name: 'number', label: '仓库编号', field: 'number', align: 'left' },
        { name: 'name', label: '仓库名称', field: 'name', align: 'left' },
        { name: 'adminNames', label: '库管员', field: 'adminNames', align: 'left' },
        { name: 'remarks', label: '备注', field: 'remarks', align: 'left' },
        { name: 'operate', label: '操作', field: 'operate', align: 'left' }
      ],
      tableData: [],
      // 表格分页配置
      pagination: {
        // 当前页码
        page: 1,
        // 每页条数
        rowsPerPage: 15,
        // 总条数
        rowsNumber: 0
      },
      isTableLoading: false
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 获取列表
    getList () {
      this.isTableLoading = true
      const params = {
        pageNum: this.pagination.page,
        pageSize: this.pagination.rowsPerPage
      }
      !_.isEmpty(this.params.number) && (params['number'] = this.params.number)
      !_.isEmpty(this.params.name) && (params['name'] = this.params.name)
      !_.isEmpty(this.params.adminName) && (params['adminName'] = this.params.adminName)
      getWarehousesList(params).then(res => {
        this.pagination.rowsNumber = res.total
        if (res.list.length) {
          res.list.forEach(item => {
            _.isNil(item.adminName) && (item.adminName = '')
            item.remarks = item.remark
            item.adminNames = item.adminName
            _.map(this.tableColumns, 'name').map(i => { (_.isNil(item[i]) || _.isEmpty(item[i])) && (item[i] = '--') })
            _.isEmpty(item.remarks) && (item.remarks = '--')
          })
        }
        this.tableData = res.list
        this.isTableLoading = false
      }).catch(res => {
        this.isTableLoading = false
      })
    },
    // 添加/编辑仓库
    createOrEdit (type, data) {
      this.$refs.addEditWarehouse.showDialog(type, data)
    },
    // 删除仓库
    deleteWarehouse (id) {
      this.$utils.showMessage('icontubiao-28', '是否确认删除此仓库？', () => {
        delWarehouses(id).then(res => {
          if (res.code + '' === '1200') {
            if (this.tableData.length <= 1) {
              this.pagination.page = this.pagination.page === 1 ? 1 : this.pagination.page - 1
            }
            this.getList()
            this.$message.success('删除成功')
          }
        })
        // this.$utils.showMessage('icontubiao-28', '请先删除其下库位数据！')
      }, true)
    },
    /**
     * 重置查询条件
     */
    resetSearch () {
      this.params = {
        number: '',
        name: '',
        adminName: ''
      }
    },
    // 搜索
    searchData () {
      // 查询
      this.pagination.page = 1
      this.getList()
    },
    /**
     * on 分页组件的每页条数发生改变
     * @param val 每页条数
     */
    onPageSizeChange: function (val, page) {
      this.pagination.rowsPerPage = val
      page && (this.pagination.page = page)
      this.getList()
    },

    /**
     * on 分页组件的页码发生改变
     * @param val 页码
     */
    onPageChange: function (val) {
      this.pagination.page = val
      this.getList()
    }
  }
}
</script>

<style scoped lang="stylus">

</style>
